<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/6
  Time: 11:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="commons/header.jsp"%>
<div style="background-color: #ffffff; border-radius: 3px; padding: 12px;">

<button class="btn btn-success" onclick="AddAdministrator()">添加管理员</button>
<table id="userSystemTable" class="table-hover table-bordered table-striped"></table>

<%--添加管理员模态框--%>
    <div class="modal" id="showUserModal" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" onclick="destoryUserModal()">
                        <span>&times;</span>
                    </button>
                    <h3 class="modal-title">添加管理员</h3>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>用户名：</label>
                        <input onblur="checkRep()" autocomplete="off" class="form-control" id="userName" placeholder="请输入注册的用户名">
                    </div>
                    <div class="form-group">
                        <label>密码：</label>
                        <input autocomplete="off" class="form-control" id="password" placeholder="请输入注册的密码" type="password">
                    </div>

                </div>
                <div class="modal-footer">
                    <button onclick="destoryUserModal()" class="btn btn-danger">取消</button>
                    <button class="btn btn-success" onclick="addUser()">确认</button>
                </div>
            </div>
        </div>
    </div>

<%--    查看或者修改密码--%>
    <div class="modal" id="showAlterModal" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" onclick="destoryAlterModal()">
                        <span>&times;</span>
                    </button>
                    <h3 class="modal-title">查看/修改密码</h3>
                </div>
                <div class="modal-body">
                    <%--      隐藏ID标签，用来--%>
                    <input type="hidden" id="userId">

                    <div class="form-group">
                        <label>用户名：</label>
                        <div id="newUserName"></div>
                    </div>
                    <div class="form-group">
                        <label>密码：</label>
                        <div id="oldPassword"></div>
                    </div>

                    <div class="form-group">
                        <label>新密码：</label>
                        <input autocomplete="off" class="form-control" id="newPassword" >
                    </div>
                </div>
                <div class="modal-footer">
                    <button onclick="destoryAlterModal()" class="btn btn-danger">取消</button>
                    <button class="btn btn-success" onclick="alterPassword()">修改</button>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="commons/footer.jsp"%>

<script>
    $('#userSystemTable').bootstrapTable({
        //访问地址
        url:'http://localhost:8080/system/table',
        //请求方法
        method:'get',
        columns:[
            // title是表头的名字， field是返回的数据的字段名，align:'center'表示居中的意思
            {title:'ID',field:'id',type:'center'},
            {title:'用户名',field:'userName',align:'center'},
            {title:'注册时间',field:'registrationTime',align:'center',formatter:formatRegisterData},
            {title:'操作',formatter:formatoperation},
        ],
        pagination: false,  //表示使用分页
        sidePagination: 'server', //枚举值：client  server, 默认值是client
    })

    //格式化时间
    function formatRegisterData(value) {
        return moment(value).format("YYYY-MM-DD hh:mm:ss");
    }

    //显示模态框
    function AddAdministrator() {
        $('#showUserModal').modal('show');
    }

    //隐藏模态框
    function destoryUserModal() {
        resetModal();
        $('#showUserModal').modal('hide');
    }

    //格式化删除按钮
    function formatoperation(value,row) {
        var btns = '<button onclick="delectUserSystem(' + row.id + ')" class="btn btn-danger btn-xs">删除</button>';
        btns += '   <button onclick="checkOrAlter(' + row.id + ')" class="btn btn-info btn-xs">查看/修改密码</button>';
        return btns;
    }

    //检查是否重复用户名
    function checkRep() {
        let userName = $('#userName').val();
        $.ajax({
            url:'http://localhost:8080/system/checkRep',
            data: {userName:userName},
            type: 'post',
            success:function (result) {
                if(result){
                    $('#userName').val('');
                    $('#showAlterModal').bootstrapTable('refresh');
                    succeed("用户名已存在");
                }
            }
        })
    }

    //确认按钮:添加管理员
    function addUser() {
        //获取输入框的值
        let userName = $('#userName').val();
        let password = $('#password').val();
        $.ajax({
            url:'http://localhost:8080/system/register',
            data:{userName:userName,password:password},
            type:'post',
            success:function (result) {
                if(result){
                    //表示成功，然后刷新
                    destoryUserModal();//隐藏模态框
                    $('#userSystemTable').bootstrapTable('refresh');
                    succeed("添加成功");
                }else{
                    failed("添加失败");
                }
            }
        })
    }

    //关闭模态框时，重置所有信息
    function resetModal(){
        $('#userName').val('');
        $('#password').val('');
        $('#code').val('');
    }

    //删除按钮
    function delectUserSystem(userId) {
        $.ajax({
            url:'http://localhost:8080/system/delete',
            data:{userId:userId},
            type:'get',
            success:function(result){
                if(result){
                    $('#userSystemTable').bootstrapTable('refresh');//刷新
                    succeed('删除成功');
                }else{
                    failed('删除失败');
                }
            }
        })
    }

    //查看或者修改信息
    //显示模态框
    //并且显示用户名密码
    function checkOrAlter(userId) {
        $('#showAlterModal').modal('show');
        $.ajax({
            url:'http://localhost:8080/system/showPass',
            data:{userId:userId},
            type:'get',
            success:function (_data) {
                //转换成对象
                // var order=JSON.parse(_data);
                // var orderData=order.data;
                //回显到修改地址的输入框
                $('#userId').val(_data.id);
                $('#newUserName').text(_data.userName);
                $('#oldPassword').text(_data.password);
            }
        })
    }


    //隐藏模态框
    function destoryAlterModal() {
        $('#newPassword').val("");
        $('#showAlterModal').modal('hide');
    }

    //点击修改:修改数据库密码
    function alterPassword() {
        //获取输入框的参数
        let id=$('#userId').val();
        let newPassword = $('#newPassword').val();

        if (newPassword!=null&&newPassword!=''){
            $.ajax({
                url:'http://localhost:8080/system/updatePass',
                data:{id:id,newPassword:newPassword},
                type:'post',
                success:function (result) {
                    if(result){
                        destoryAlterModal();//隐藏模态框
                        $('#userSystemTable').bootstrapTable('refresh');//刷新
                        succeed('修改成功');
                    }else{
                        failed('修改失败');
                    }
                }
            })
        }
    }
    //成功提示框
    function succeed(message) {
        Lobibox.notify('success',{
            delay:2000,//持续时间
            title:'提示',
            msg: message,
            size:'mini',// normal, mini, large  大小
        })
    }

    //失败提示框
    function failed(message) {
        Lobibox.notify('error',{
            delay:2000,//持续时间
            title:'警告',
            msg: message,
            size:'mini',// normal, mini, large  大小
        })
    }

</script>

